<!-- 单选题 -->

<template>
  <div class="flex1">
    <OurTitle v-bind="$props" />

    <draggable v-model="obj.optionList" :animation="200">
      <div v-for="(option, i) in obj.optionList" :key="option.key" class="QuestionnaireList-flex">
        <div style="width: 40px">
          <el-radio :value="false" disabled>{{ option.label }}</el-radio>
        </div>
        <div v-if="!isShow">
          <BtnText :title="CORE.MAP.TIP_DEL" :disabled="obj.optionList.length === 1" red @click="toDel(i)" />
        </div>

        <FormImage :one="option" :square="36" folder="questionnaire" text="" flex0 />
        <FormTextarea :one="option" bind="content" :rows="[1, 5]" tip="图片和描述，不能同时为空" noCount />

        <div class="flex0">关联</div>
        <FormSelectMulti
          :one="option"
          :dict="relatedDict"
          :tip="`选中 ${option.label} 时，显示的问题`"
          :width="220"
          flex0
        />
      </div>
    </draggable>

    <div class="QuestionnaireList-flex">
      <div style="width: 40px">
        <el-radio v-if="hasAdd" :value="false" disabled />
      </div>
      <div v-if="!isShow" style="width: 88px">
        <BtnText v-if="hasAdd" :title="CORE.MAP.TIP_ADD" @click="toAdd" />
      </div>

      <div class="QuestionnaireList-remark">底部备注</div>
      <OurRemark v-bind="$props" />

      <div style="width: 248px" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from '../props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyRadio',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('../components', true, /vue$/)),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 有无新增按钮
     */
    hasAdd() {
      return !this.isShow && this.obj.optionList.length < 26
    },

    /**
     * 关联字典
     */
    relatedDict() {
      return this.one.questionList.map((option, i) => [option.key, i + 1])
        .filter((option) => option[0] !== this.obj.key)
    },

    /**
     * 标记
     */
    marks() {
      const { optionList: { length }, min, max } = this.obj
      return { 1: '1', [min]: `${min}`, [max]: `${max}`, [length]: `${length}` }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听选项列表
     */
    'obj.optionList'() {
      this.resetOptionNo()
    },
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    !this.obj.optionList.length && this.toAdd()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 点击添加
     */
    toAdd() {
      this.obj.optionList.push({ ...this.MAP.OPTION, key: `${Date.now()}` })
      if (this.obj.type.includes('checkbox')) this.obj.max = this.obj.optionList.length
    },

    /**
     * 点击删除
     */
    toDel(index) {
      this.obj.optionList.splice(index, 1)
    },

    /**
     * 重置选项题号
     */
    resetOptionNo() {
      this.obj.optionList.forEach((option, i) => {
        option.no = i + 1
        if (this.obj.type !== 'textarea') option.label = String.fromCharCode(i + 65)
      })
    },
  },
}
</script>
